<template>
  <div>
     <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card shadow="always" :body-style="{ padding: '20px'}">
        <el-form :model="params"  label-width="80px" :inline="true" size="small">
            <el-form-item label="角色名">
                <el-input v-model="params.roleName"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" size="default" @click="searchBtn" icon="el-icon-search">查询</el-button>
                <el-button type="primary" size="default" @click="resetBtn" icon="el-icon-delete">重置</el-button>
                <el-button type="primary" size="default" @click="addRole" icon="el-icon-plus">添加</el-button>  
            </el-form-item>
            <el-table :data="tableList" border stripe>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="角色名" prop="roleName"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="更新时间" prop="updateTime"></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="small" @click="editRole(scope.row)">编辑</el-button>
                            <el-button type="primary" icon="el-icon-delete" size="small" @click="deleteRole(scope.row)">删除</el-button>
                            
                    </template>
                </el-table-column>
                
            </el-table>
            <el-pagination @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="params.currentPage"
            :page-size="params.pageSize"
            :page-sizes="[5,10,20,40]"
            layout="total,sizes,prev,pager,next,jumper"
            :total="params.total" background
            :pager-count="7"
            ></el-pagination>
        </el-form>
        
     </el-card>
     <el-dialog
        :title="editDialog.title"
        :visible.sync="editDialog.visible"
        :width="editDialog.width">
          <!-- 表单 -->
          <el-form :model="editModel" ref="editForm" :rules="rules" label-width="80px" :inline="true" size="small">
                <el-form-item label="角色名:" prop="roleName">
                    <el-input v-model="editModel.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="editModel.remark"></el-input>
                </el-form-item>

            </el-form>
        <span slot="footer">
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确认</el-button>
        </span>


    </el-dialog>

  </div>
</template>

<script>
import { addRoleApi, deleteRoleApi, getRoleListApi, updateRoleApi } from '@/api/sys-role';

export default {
  name: 'SysRoleList',

  data() {
    return {
        params:{
            roleName:'',
            currentPage:1,
            pageSize:5,
            total: 0
        },
        tableList:[],

        editModel:{
            roleId:'',
            roleName:'',
            remark:'',
            type:'',
   
        },

        editDialog:{
            title:'',
            visible:false,
            width: '800px',
        },
      
    };
  },

  mounted() {
    this.getRoleList();
    
  },

  methods: {

    editRole(row){
        this.$resetForm('editForm',this.editModel);
        this.$objCopy(row,this.editModel);

        this.editDialog.title='修改角色';
        this.editModel.type='1';
        this.editDialog.visible=true;
    },
    async deleteRole(row){
     let confirm=await this.$myConfirm(`你确定要删除-${row.roleName}-角色吗?`);
        if(confirm){
            let res =await deleteRoleApi(row.roleId)
            if(res && res.code==200){
                this.$message.success("删除角色成功");
                this.getRoleList();
            }else{
                this.$message.error(res.msg);
                this.getRoleList();
            }
        }
    },
    onClose(){
        this.editDialog.visible=false;
    },
   async onConfirm(){
   await this.$refs.editForm.validate(async valid=>{
        if(valid){
            let res =null;
                if(this.editModel.type=='0'){
                res =await addRoleApi(this.editModel);
                }else{
                res =await updateRoleApi(this.editModel);
                }
                if(res && res.code==200){
                    this.editDialog.visible=false;
                    this.getRoleList();
                    this.$message.success(res.msg);
                }
           }
        });
    },

    addRole(){
        this.editDialog.title='添加角色';
        this.editModel.type='0';
        this.editDialog.visible=true;

    },
    resetBtn(){
        this.params.roleName='';
        this.getRoleList();
    },

    async searchBtn(){
        this.getRoleList();
    },
    async getRoleList(){
        let res =await getRoleListApi(this.params);
        if(res && res.code==200){
            this.tableList=res.data.records;
            this.params.total=res.data.total;
        }
    },

    
  },
  rules:{
        roleName:[{
            require: true,
            trigger: "blur",
            message: "请填写角色名",
        }],
        remark:[{
            require: false,
            trigger: "blur",
            message:"请填写备注",
        }]

  },
};
</script>